<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="contain">
        <input type="text" v-model="firstname">
        <br>
        <input type="text" v-model="secondname">
        <br>
        <h1>全名:{{fullname}}</h1>

        <script>
            const vm = new Vue({
                el: '#contain',
                data: {
                    firstname: '张',
                    secondname: '三',
                    fullname: '张-三'
                },
                computed: {},
                watch: {
                    firstname(newValue) {
                        this.fullname = newValue + '-' + this.secondname
                    },
                    secondname(newValue) { this.fullname = this.firstname + '-' + newValue }
                }
            });
        </script>
</body>

</html>